<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用拼接太麻烦 -->
        <p>{{firstName+' '+lastName}}</p>
        <p>{{firstName}} {{lastName}}</p>
        <!-- 调用方法需要加() -->
        <p>{{getFullName()}}</p>
        <!-- 使用计算属性不用加() -->
        <p>{{fullName}}</p>
        <!-- 使用|来启动过滤器 -->
        <p>书的总价{{totalPrice | showPrice}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: 'C',
                lastName: 'K',
                books: [
                    { id: 1, name: 'aaa', price: 123.1 },
                    { id: 2, name: 'bbb', price: 232.6 },
                    { id: 3, name: 'ccc', price: 423.1 },
                ],
            },
            filters: {//过滤器
                showPrice(price) {
                    return '￥' + price.toFixed(2);
                }
            },
            methods: {
                getFullName: function () {
                    return this.firstName + ' ' + this.lastName;
                }
            },
            computed: {//计算属性。有缓存，性能比methods高
                fullName: function () {
                    return this.firstName + ' ' + this.lastName;
                },
                // fullName: {// 计算属性的完整写法，很少这样写
                //     // set方法很少使用，不使用就是只读属性
                //     set: function (value) {//如果要使用，要接收一个值
                //         // 可以在浏览器控制台输入app.fullName='Ali Cheng'来改变fullName
                //         const names = value.split(' ');
                //         this.firstName = names[0];
                //         this.lastName = names[1];
                //     },
                //     get: function () {//只用get方法，就简化成了以上的方法
                //         return this.firstName + ' ' + this.lastName;
                //     }
                // },
                totalPrice: function () {
                    let result = 0;
                    //以下几种计算方式等价
                    // for (let i = 0; i < this.books.length; i++) {
                    //     result += this.books[i].price;
                    // }
                    // for (let i in this.books) {
                    //     result += this.books[i].price;
                    // }
                    for (let book of this.books) {
                        result += book.price;
                    }
                    return result;
                }
            },
        })
    </script>
</body>

</html>